.toggleWrapper {
  position: relative;
  // top: 50%;
  // left: 50%;
  overflow: hidden;
  // padding: 0 200px;
  // transform: translate3d(-50%, -50%, 0);
  color: white;

  input {
    position: absolute;
    left: -99em;
  }

  .toggle {
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: 45px; // 缩小宽度
    height: 25px; // 缩小高度
    background-color: #83d8ff;
    border-radius: 42px; // 减小border-radius
    transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);

    // &:before {
    //   content: 'AM';
    //   position: absolute;
    //   left: -25px; // 位置调整
    //   top: 7px; // 位置调整
    //   font-size: 9px; // 缩小字体大小
    // }

    // &:after {
    //   content: 'PM';
    //   position: absolute;
    //   right: -24px; // 位置调整
    //   top: 7px; // 位置调整
    //   font-size: 9px; // 缩小字体大小
    //   color: #749ed7;
    // }

    .toggle__handler {
      display: inline-block;
      position: relative;
      z-index: 1;
      top: 1.5px; // 位置调整
      left: 1.5px; // 位置调整
      width: 22px; // 缩小宽度
      height: 22px; // 缩小高度
      background-color: #ffcf96;
      border-radius: 25px; // 减小border-radius
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
      transform: rotate(-45deg);

      .crater {
        position: absolute;
        background-color: #e8cda5;
        opacity: 0;
        transition: opacity 200ms ease-in-out;
        border-radius: 100%;

        &--1 {
          top: 9px; // 位置调整
          left: 5px; // 位置调整
          width: 2px; // 缩小尺寸
          height: 2px; // 缩小尺寸
        }

        &--2 {
          top: 14px; // 位置调整
          left: 11px; // 位置调整
          width: 3px; // 缩小尺寸
          height: 3px; // 缩小尺寸
        }

        &--3 {
          top: 5px; // 位置调整
          left: 12px; // 位置调整
          width: 4px; // 缩小尺寸
          height: 4px; // 缩小尺寸
        }
      }
    }

    .star {
      position: absolute;
      background-color: #fff;
      transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
      border-radius: 50%;
      &--1 {
        top: 5px; // 位置调整
        left: 17px; // 位置调整
        z-index: 0;
        width: 15px; // 缩小尺寸
        height: 1.5px; // 缩小尺寸
      }

      &--2 {
        top: 9px; // 位置调整
        left: 14px; // 位置调整
        z-index: 1;
        width: 15px; // 缩小尺寸
        height: 1.5px; // 缩小尺寸
      }

      &--3 {
        top: 13px; // 位置调整
        left: 20px; // 位置调整
        z-index: 0;
        width: 15px; // 缩小尺寸
        height: 1.5px; // 缩小尺寸
      }

      &--4,
      &--5,
      &--6 {
        opacity: 0;
        transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
      }

      &--4 {
        top: 8px; // 位置调整
        left: 5px; // 位置调整
        z-index: 0;
        width: 1px; // 缩小尺寸
        height: 1px; // 缩小尺寸
        transform: translate3d(1.5px, 0, 0);
      }

      &--5 {
        top: 16px; // 位置调整
        left: 8px; // 位置调整
        z-index: 0;
        width: 1.5px; // 缩小尺寸
        height: 1.5px; // 缩小尺寸
        transform: translate3d(1.5px, 0, 0);
      }

      &--6 {
        top: 18px; // 位置调整
        left: 14px; // 位置调整
        z-index: 0;
        width: 1px; // 缩小尺寸
        height: 1px; // 缩小尺寸
        transform: translate3d(1.5px, 0, 0);
      }
    }
  }

  input:checked {
    & + .toggle {
      background-color: #749dd6;
      &:before {
        color: #749ed7;
      }

      &:after {
        color: #fff;
      }

      .toggle__handler {
        background-color: #ffe5b5;
        transform: translate3d(20px, 0, 0) rotate(0); // 缩小移动距离
      }

      .toggle__handler .crater {
        opacity: 1;
      }

      .star {
        &--1 {
          width: 1px; // 缩小尺寸
          height: 1px; // 缩小尺寸
        }

        &--2 {
          width: 2px; // 缩小尺寸
          height: 2px;
          transform: translate3d(-2.5px, 0, 0);
        }
        &--3 {
          width: 1px; // 缩小尺寸
          height: 1px; // 缩小尺寸
          transform: translate3d(-3.5px, 0, 0);
        }

        &--4,
        &--5,
        &--6 {
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }

        &--4 {
          transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
        }

        &--5 {
          transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
        }

        &--6 {
          transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
        }
      }
    }
  }
}
